import Taro from "@tarojs/taro";
import {View, Text, Input, Button} from '@tarojs/components'
import './index.scss'
import {useState} from "react";
import {getCodeApi} from "../../http/userApi";


function Index() {
  //输入框绑定手机号
  const [phone , setPhone] =useState('')

  //设置输入事件
  const inputPhone = (e)=>{
    setPhone(e.target.value)
  }

  //获取验证码
  const getCode =()=>{
    const reg_tel = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if(phone==''){
      Taro.showModal({
        title:'请输入手机号'
      })
      return;
    }
    if(!reg_tel.test(phone)){
      Taro.showModal({
        title:'输入的手机号格式不正确'
      })
      return;
    }
    console.log('验证通过')
    Taro.setStorageSync('phone',phone)
    console.log('输入的手机号')
    getCodeApi(phone)
      .then(res=>{
        if(res.data.map.code==1){
          Taro.navigateTo({
            url:"/pages/loginInputCode/index"
          })
        }
        console.log('请求成功',res)
      })
      .catch(err=>{
        console.log('请求失败',err)
      })

  }
  return (
    <View className='box'>
      <View style={{backgroundColor:'#fff',height:'80px',lineHeight:'80px'}}>
        <View className='iconfont icon-xiangzuo' style={{position:'absolute',top:'0',left:'0',fontSize:'22px',paddingTop:'6px',display:'flex'}}
              onClick={()=>Taro.navigateBack()}>
          <View style={{fontSize:'14px',paddingLeft:'4px'}}>登录</View>
        </View>
        <View style={{textAlign:'center',width:'100%'}}></View>
      </View>
      <View className='item'>
        <View className='title'>登录/注册</View>
      </View>
      <View className='item'>
        <Input className='input' placeholder='输入手机号' value={phone} onInput={(e)=>inputPhone(e)}></Input>
      </View>
      <View className='item'>
        <View className='getCode' onClick={getCode}>获取验证码</View>
      </View>

    </View>
  );
}

export default Index;
